<template>
  <el-dialog v-model="dialogVisible" title="编辑机构" width="1100px" class="edit-user-dialog" :close-on-click-modal="false" @closed="handleClosed">
    <div class="form-container">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right" class="edit-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授权名称" prop="username">
              <el-input v-model="form.username" placeholder="请输入授权名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="营业执照全称" prop="business_license_name">
              <el-input v-model="form.business_license_name" placeholder="请输入营业执照全称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人姓名" prop="legal_person_name">
              <el-input v-model="form.legal_person_name" placeholder="请输入法人姓名" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="法人电话" prop="legal_person_phone">
              <el-input v-model="form.legal_person_phone" maxlength="11" placeholder="请输入法人电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人微信号" prop="legal_person_wechat">
              <el-input v-model="form.legal_person_wechat" placeholder="请输入法人微信号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人姓名" prop="contact_person_name">
              <el-input v-model="form.contact_person_name" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人电话" prop="contact_person_phone">
              <el-input v-model="form.contact_person_phone" maxlength="11" placeholder="请输入联系人电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人微信号" prop="contact_person_wechat">
              <el-input v-model="form.contact_person_wechat" placeholder="请输入联系人微信号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="省市区" prop="province_city_district">
              <el-cascader
                  v-model="form.province_city_district"
                  :options="areaOptions"
                  placeholder="请选择省市区"
                  :props="{
                    value: 'label',
                    label: 'label',
                    children: 'children',
                  }" />
              <!-- <el-cascader
                v-model="form.province_city_district"
                :options="areaOptions"
                :props="{
                  label: 'label',
                  value: 'label',
                  children: 'children',
                }"
                placeholder="请选择省市区" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address_detail">
              <el-input v-model="form.address_detail" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="成立时间" prop="establishment_date">
              <el-date-picker v-model="form.establishment_date" type="date" placeholder="请选择成立时间" value-format="YYYY-MM-DD" :disabled-date="disabledDate" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="校区" prop="campus" class="campus-form-item">
              <el-input v-model="form.campus" placeholder="请输入校区,多个校区逗号分隔" />
              <div class="example-text">示例：校区A,校区B,校区C（多个校区使用英文逗号分隔）</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="在校人数" prop="students_count">
              <el-input-number v-model="form.students_count" :min="0" placeholder="请输入在校人数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="语言机构人数" prop="language_institution_students_count">
              <el-input-number v-model="form.language_institution_students_count" :min="0" placeholder="请输入语言机构人数" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="简介" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请输入简介" />
        </el-form-item>

        <el-row :gutter="30" class="image-upload-row">
          <el-col :span="8">
            <el-form-item label="Logo" prop="logo">
              <el-upload class="avatar-uploader" :show-file-list="false" :before-upload="(file) => beforeAvatarUpload(file) && customUpload(file, 'logo')">
                <img v-if="form.logo" :src="imgUrls(form.logo)" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="营业执照" prop="business_license_img">
              <el-upload
                class="avatar-uploader"
                :show-file-list="true"
                :before-upload="beforeAvatarUpload"
                :on-change="(file, files) => handleChange(file, files, 'business_license_img')"
                list-type="picture-card"
                :file-list="getFileList(form.business_license_img)"
                @remove="handleRemove($event, 'business_license_img')"
                :on-preview="handlePictureCardPreview"
                multiple
                :auto-upload="false">
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="办学许可证" prop="school_permit_img">
              <el-upload
                class="avatar-uploader"
                :show-file-list="true"
                :before-upload="beforeAvatarUpload"
                :on-change="(file, files) => handleChange(file, files, 'school_permit_img')"
                list-type="picture-card"
                :file-list="getFileList(form.school_permit_img)"
                @remove="handleRemove($event, 'school_permit_img')"
                :on-preview="handlePictureCardPreview"
                multiple
                :auto-upload="false">
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col>
            <el-form-item label="法人身份证" prop="legal_person_id_img">
              <el-upload
                class="avatar-uploader"
                :show-file-list="true"
                :before-upload="beforeAvatarUpload"
                :on-change="(file, files) => handleChange(file, files, 'legal_person_id_img')"
                list-type="picture-card"
                :file-list="getFileList(form.legal_person_id_img)"
                @remove="handleRemove($event, 'legal_person_id_img')"
                :on-preview="handlePictureCardPreview"
                multiple
                :auto-upload="false">
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="联系人身份证" prop="contact_person_id_img">
              <el-upload
                class="avatar-uploader"
                :show-file-list="true"
                :before-upload="beforeAvatarUpload"
                :on-change="(file, files) => handleChange(file, files, 'contact_person_id_img')"
                list-type="picture-card"
                :file-list="getFileList(form.contact_person_id_img)"
                @remove="handleRemove($event, 'contact_person_id_img')"
                :on-preview="handlePictureCardPreview"
                multiple
                :auto-upload="false">
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="场地照片" prop="site_photos">
              <el-upload
                class="avatar-uploader"
                :show-file-list="true"
                :before-upload="beforeAvatarUpload"
                :on-change="(file, files) => handleChange(file, files, 'site_photos')"
                list-type="picture-card"
                :file-list="getFileList(form.site_photos)"
                @remove="handleRemove($event, 'site_photos')"
                :on-preview="handlePictureCardPreview"
                multiple
                :auto-upload="false">
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 添加图片预览对话框 -->
  <el-dialog v-model="previewVisible" class="preview-dialog">
    <img :src="previewUrl" alt="Preview Image" style="width: 100%;" />
  </el-dialog>
</template>

<script setup>
  import { ref, reactive, nextTick, computed, onMounted, onBeforeUnmount } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Plus } from '@element-plus/icons-vue';
  import OSS from 'ali-oss';
  import Http from '@/utils/http';
  import { imgUrls } from '@/utils/utils';
  import { useMainStore } from '@/stores/useMain';
  import { regionData } from 'element-china-area-data';

  const areaOptions = ref(regionData);
  const mainStore = useMainStore();
  const props = defineProps({
    roleList: {
      type: Array,
      required: true,
    },
  });

  const emit = defineEmits(['update', 'close']);

  const dialogVisible = ref(false);
  const loading = ref(false);
  const formRef = ref(null);

  const client = new OSS({
    region: 'oss-cn-chengdu',
    accessKeyId: 'LTAI5t8ySspV3RByRTKBdHdF',
    accessKeySecret: 'SalGEBIs14QFqZ7dmKnHvFquxtGBAh',
    bucket: 'yipei001',
    secure: true,
    endpoint: 'oss-cn-chengdu.aliyuncs.com',
  });

  const form = reactive({
    // id: '90',
    // phone: '15522222222',
    // username: '成都02',
    // business_license_name: '哈哈哈有限公司',
    // legal_person_name: '娃哈哈',
    // legal_person_phone: '17712344563',
    // legal_person_wechat: 'wahaha',
    // contact_person_name: '王小二',
    // contact_person_phone: '15845454545',
    // contact_person_wechat: 'wangxiaoer',
    // email: '166@qq.com',
    // province_city_district: ['北京市','北京市', '东城区'],
    // address_detail: '娃哈哈有限公司地址地址详细地址详细地址详细地址',
    // establishment_date: '2018-02-12',
    // campus: '校区A,校区B',
    // students_count: 100,
    // language_institution_students_count: 2,
    // description: '简介',
    // logo: '/images/logo/1747993334977-login_ic@2x.png',
    // business_license_img: '/images/logo/1747993334977-login_ic@2x.png',
    // school_permit_img: '/images/logo/1747993334977-login_ic@2x.png',
    // legal_person_id_img: '/images/logo/1747993334977-login_ic@2x.png',
    // contact_person_id_img: '/images/logo/1747993334977-login_ic@2x.png',
    // site_photos: '/images/logo/1747993334977-login_ic@2x.png',
    // examEnabled: false,
    // showEnabled: false
  });

  const open = async (row) => {
    document.body.style.overflow = 'hidden';
    document.body.style.paddingRight = '0px';

    dialogVisible.value = true;
    await nextTick();
    formRef.value?.resetFields();

    const formContainer = document.querySelector('.form-container');
    if (formContainer) {
      formContainer.scrollTop = 0;
    }

    try {
      const { code, data } = await Http.get({
        url: '/yp_admin/getUserInfo',
        params: { id: row.id },
      });

      if (code === 200 && data) {
        const province_city_district = data.province_city_district
          ? (() => {
              const address = data.province_city_district;
              
              if (['北京市', '上海市', '天津市', '重庆市'].some(city => address.startsWith(city))) {
                const cityName = address.substring(0, 2) + '市';
                const parts = address.split(cityName);
                const remaining = parts[parts.length - 1];

                if (remaining.includes('市辖区')) {
                  const district = remaining.replace('市辖区', '');
                  return [cityName, '市辖区', district];
                } else if (remaining.includes('县')) {
                  const county = remaining.replace(/^县/, '');
                  return [cityName, '县', county];
                }
              } else {
                const provinceMatch = address.match(/(.+?(?:省|自治区))/);
                const province = provinceMatch ? provinceMatch[1] : '';
                let remaining = address.slice(province.length);

                const cityMatch = remaining.match(/(.+?(?:自治州|市))/);
                const city = cityMatch ? cityMatch[1] : '';
                remaining = remaining.slice(city.length);

                const districtMatch = remaining.match(/(.+?(?:区|县|自治县|市))/);
                const district = districtMatch ? districtMatch[1] : '';

                return [province, city, district].filter(Boolean);
              }
              
              return address.match(/(.*?省|.*?自治区|.*?市)|(.*?市)|(.*?区|.*?县)/g)
                ?.map(item => item.trim())
                .filter(Boolean) || [];
            })()
          : [];

        const imageFields = [
          'business_license_img',
          'school_permit_img',
          'legal_person_id_img',
          'contact_person_id_img',
          'site_photos'
        ];
        
        imageFields.forEach(field => {
          if (data[field]) {
            data[field] = data[field].split(',').join(',');
          }
        });

        delete data.opendId;
        Object.assign(form, {
          ...data,
          province_city_district,
          campus: Array.isArray(data.campuses) ? data.campuses.map((item) => item.name).join(',') : '',
        });
        
      } else {
        ElMessage.error('获取用户信息失败');
      }
    } catch (error) {
      console.error('获取用户信息失败:', error);
      ElMessage.error('获取用户信息失败');
    }
  };

  const rules = {
    username: [
      { required: true, message: '请输入用户名称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
    business_license_name: [{ required: true, message: '请输入营业执照全称', trigger: 'blur' }],
    legal_person_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
    legal_person_phone: [
      { required: true, message: '请输入法人电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    contact_person_name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
    contact_person_phone: [
      { required: true, message: '请输入联系人电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
    ],
    province_city_district: [{ required: true, message: '请选择省市区', trigger: 'change' }],
    address_detail: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    establishment_date: [{ required: true, message: '请选择成立时间', trigger: 'change' }],
    campus: [
      { required: true, message: '请输入校区', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value && value.includes('，')) {
            callback(new Error('请使用英文逗号(,)分隔多个校区'));
          } else {
            callback();
          }
        },
        trigger: 'blur',
      },
    ],
    logo: [{ required: true, message: '请上传Logo', trigger: 'change' }],
  };

  const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 10;

    if (!isJPG && !isPNG) {
      ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
      return false;
    }
    if (!isLt2M) {
      ElMessage.error('上传图片大小不能超过 10MB!');
      return false;
    }
    return true;
  };

  const previewVisible = ref(false);
  const previewUrl = ref('');

  const handlePictureCardPreview = (file) => {
    previewUrl.value = file.url;
    previewVisible.value = true;
  };

  const getFileList = (imageStr) => {
    if (!imageStr) return [];
    
   
    
    const imageArray = imageStr.split(',')
      .filter(url => url && url.trim())
      .map(url => url.trim());
    
   
    
    const fileList = imageArray.map(url => ({
      url: imgUrls(url),
      name: url.split('/').pop(),
      preview: imgUrls(url)
    }));
    
   
    
    return fileList;
  };

  const handleRemove = (file, field) => {
    if (!form[field]) return;
    
  

    // 获取要删除的图片URL
    let removedUrl = file.url;
    // 处理完整URL的情况
    if (removedUrl.includes('http')) {
      // 提取URL中的相对路径部分
      const urlParts = removedUrl.split('/images/');
      if (urlParts.length > 1) {
        removedUrl = '/images/' + urlParts[1];
      }
    }
    removedUrl = removedUrl.trim();
    
   
    
    // 分割当前图片列表并过滤
    const updatedImages = form[field]
      .split(',')
      .map(img => img.trim())
      .filter(img => img && img !== removedUrl);
    
    // 更新表单数据
    form[field] = updatedImages.join(',');
    
    // console.log('删除后的图片列表:', {
    //   field,
    //   images: form[field],
    //   updatedImages
    // });
  };

  const handleMultipleUpload = async (files, field) => {
    // 获取当前已有的图片列表
    const currentImages = form[field] 
      ? form[field].split(',').filter(img => img && img.trim())
      : [];

    const uploadPromises = files.map(file => {
      const fileExt = file.name.substring(file.name.lastIndexOf('.'));
      const fileName = `images/${field}/${Date.now()}-${Math.random().toString(36).substring(2)}${fileExt}`;
      return client.put(fileName, file);
    });

    try {
      const results = await Promise.all(uploadPromises);
      const successPaths = results
        .filter(result => result.res && result.res.status === 200)
        .map(result => `/${result.name}`);

      if (successPaths.length > 0) {
        // 合并新旧图片列表并去重
        const allImages = [...currentImages, ...successPaths];
        const uniqueImages = [...new Set(allImages)];
        
        // 更新表单数据
        form[field] = uniqueImages.join(',');
        
        ElMessage.success(`成功上传 ${successPaths.length} 张图片`);
      }
    } catch (error) {
      console.error('批量上传失败:', error);
      ElMessage.error('批量上传失败');
    }
  };

  const customUpload = async (file, field) => {
    try {
      const fileExt = file.name.substring(file.name.lastIndexOf('.'));
      const fileName = `images/${field}/${Date.now()}${fileExt}`;
      const result = await client.put(fileName, file);

      if (result.res && result.res.status === 200) {
        const newPath = `/${fileName}`;
        if (field === 'logo') {
          // logo 直接替换
          form[field] = newPath;
        } else {
          // 其他字段保持原有的多图片上传逻辑
          const currentImages = form[field] 
            ? form[field].split(',').filter(img => img && img.trim())
            : [];
          
          if (!currentImages.includes(newPath)) {
            currentImages.push(newPath);
            form[field] = currentImages.join(',');
          } else {
            ElMessage.warning('该图片已存在');
            return;
          }
        }
        ElMessage.success('上传成功');
      }
    } catch (error) {
      console.error('上传失败:', error);
      ElMessage.error('上传失败');
    }
    return false;
  };

  const handleChange = (uploadFile, uploadFiles, field) => {
    // 获取当前已有的图片数量
    const currentCount = form[field] 
      ? form[field].split(',').filter(img => img && img.trim()).length 
      : 0;

    if (uploadFiles.length > 1) {
      // 如果是多文件上传，过滤掉重复的文件（基于文件名和大小）
      const uniqueFiles = uploadFiles
        .filter(file => file.status === 'ready')
        .filter((file, index, self) => 
          index === self.findIndex((f) => 
            f.name === file.name && f.size === file.size
          )
        )
        .map(file => file.raw);

      if (uniqueFiles.length > 0) {
        handleMultipleUpload(uniqueFiles, field);
      }
    } else if (uploadFiles.length === 1 && uploadFile.status === 'ready') {
      // 单文件上传
      customUpload(uploadFile.raw, field);
    }
  };

  const handleSubmit = async () => {
    if (!formRef.value) return;

    const formData = { ...form };
    if (Array.isArray(formData.province_city_district)) {
      formData.province_city_district = formData.province_city_district.join('');
    }

    // 确保所有图片字段都是以逗号分隔的字符串，并且去除空值
    const imageFields = [
      'business_license_img',
      'school_permit_img',
      'legal_person_id_img',
      'contact_person_id_img',
      'site_photos'
    ];

    imageFields.forEach(field => {
      // 如果字段已经是字符串，先分割成数组再处理
      const images = typeof formData[field] === 'string' 
        ? formData[field].split(',') 
        : formData[field];
      
      // 过滤掉空字符串并重新组合
      if (Array.isArray(images)) {
        formData[field] = images
          .filter(img => img && img.trim())  // 过滤掉空值和纯空格
          .map(img => img.trim())  // 去除每个URL的首尾空格
          .join(',');
      } else if (formData[field]) {
        // 如果不是数组但有值，确保是清理过的字符串
        formData[field] = formData[field].trim();
      } else {
        // 如果没有值，设置为空字符串
        formData[field] = '';
      }
    });

    // console.log('提交的图片数据:', {
    //   business_license_img: formData.business_license_img,
    //   school_permit_img: formData.school_permit_img,
    //   legal_person_id_img: formData.legal_person_id_img,
    //   contact_person_id_img: formData.contact_person_id_img,
    //   site_photos: formData.site_photos
    // });

    await formRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true;
        try {
          const { code, msg } = await Http.post({
            url: '/yp_admin/updateUser',
            data: formData,
          });
          if (code === 200) {
            ElMessage.success('修改成功');
            dialogVisible.value = false;
            emit('update');
          } else {
            ElMessage.error(msg || '修改失败');
          }
        } catch (error) {
          console.error('修改用户失败:', error);
          ElMessage.error('修改失败');
        } finally {
          loading.value = false;
        }
      }
    });
  };

  const handleClosed = () => {
    document.body.style.overflow = '';
    document.body.style.paddingRight = '';

    formRef.value?.resetFields();
    emit('close');
  };

  const disabledDate = (time) => {
    return time.getTime() > Date.now();
  };

  const filteredRoleList = computed(() => {
    return props.roleList.filter((item) => item.name != '全部');
  });

  onBeforeUnmount(() => {
    if (document.body.style.overflow === 'hidden') {
      document.body.style.overflow = '';
      document.body.style.paddingRight = '';
    }
  });

  defineExpose({
    open,
  });
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    text-align: center;
    line-height: 160px;
  }

  .avatar {
    width: 160px;
    height: 160px;
    display: block;
    object-fit: cover;
  }

  /* 多图片上传的样式 */
  .avatar-uploader .el-upload-list--picture-card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .avatar-uploader .el-upload-list--picture-card .el-upload-list__item {
    width: 160px;
    height: 160px;
    margin: 0;
  }

  .avatar-uploader .el-upload--picture-card {
    width: 160px;
    height: 160px;
    margin: 0;
  }

  .avatar-uploader .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 防止弹窗导致页面出现滚动条 */
  .el-popup-parent--hidden {
    overflow: hidden !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  body.el-popup-parent--hidden {
    overflow: hidden !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .edit-user-dialog .el-dialog {
    margin: 0 auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh;
    max-width: 95vw;
    overflow: visible !important;
  }

  .edit-user-dialog.el-dialog__wrapper {
    position: fixed !important;
    overflow: hidden !important;
  }

  .edit-user-dialog .el-dialog__body {
    padding: 0;
    height: calc(80vh - 150px);
  }

  .edit-user-dialog .form-container {
    height: 100%;
    padding: 25px 35px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .edit-user-dialog .edit-form {
    height: 100%;
  }

  .edit-user-dialog .campus-form-item.el-form-item .el-form-item__label {
    padding-top: 0;
    line-height: 32px;
  }

  .edit-user-dialog .campus-form-item.el-form-item .el-form-item__content .example-text {
    margin-top: 4px;
    line-height: 1.2;
    color: #909399;
    font-size: 12px;
  }

  .edit-user-dialog .el-input,
  .edit-user-dialog .el-select,
  .edit-user-dialog .el-cascader,
  .edit-user-dialog .el-date-picker,
  .edit-user-dialog .el-input-number {
    width: 100% !important;
  }

  .edit-user-dialog .el-input-number .el-input__wrapper {
    width: 100%;
  }

  .edit-user-dialog .form-container::-webkit-scrollbar {
    width: 8px;
  }

  .edit-user-dialog .form-container::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 4px;
  }

  .edit-user-dialog .form-container::-webkit-scrollbar-track {
    background: #f5f7fa;
  }

  .edit-user-dialog .el-dialog__footer {
    border-top: 1px solid #dcdfe6;
    padding: 15px 30px;
  }

  .edit-user-dialog .el-row {
    margin-bottom: 15px;
  }

  .edit-user-dialog .el-form-item {
    margin-bottom: 22px;
  }

  .edit-user-dialog [prop='description'] {
    margin-bottom: 35px;
  }

  .edit-user-dialog .image-upload-row {
    margin-top: 15px;
  }

  .edit-user-dialog .el-form-item__label {
    padding-right: 15px;
  }

  .edit-user-dialog .el-row .el-col .el-form-item {
    margin-right: 10px;
  }

  .edit-user-dialog .el-form-item__content {
    line-height: 40px;
  }

  .edit-user-dialog textarea.el-textarea__inner {
    line-height: 1.5;
  }

  html.has-dialog,
  body.has-dialog {
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  .preview-dialog .el-dialog {
    text-align: center;
  }

  .preview-dialog .el-dialog__body {
    padding: 0;
    height: auto;
  }

  .preview-dialog img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
  }

  /* 优化多图片上传的样式 */
  .avatar-uploader.el-upload--picture-card {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    margin: 0 8px 8px 0;
  }

  .el-upload-list--picture-card {
    display: flex;
    flex-wrap: wrap;
  }
</style>
